<template>
  <div class="dashboard-container">
    <PanelGroup :totalInfo="totalInfo"/>
    <div class="box-card">
      <div class="card-title">营业趋势</div>
      <LineBarEcharts height="500px" :lineBarData="lineBarData"/>
    </div>

    <div class="card-main">
      <div class="card-item box-card">
        <div class="card-title">商品销售榜</div>
        <el-table :data="goodsSaleSort" stripe height="350px" style="width: 100%">
          <el-table-column label="排名" width="50" align="center">
            <template #default="{row, $index}">
              <img v-if="$index === 0" class="sort-icon" src="@/assets/images/sort_1.png" alt="">
              <img v-else-if="$index === 1" class="sort-icon" src="@/assets/images/sort_2.png" alt="">
              <img v-else-if="$index === 2" class="sort-icon" src="@/assets/images/sort_3.png" alt="">
              <span v-else class="sort-num">{{ $index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品">
            <template #default="{row}">
              <div class="product-info">
                <img class="product-pic" :src="row.image_url" alt="">
                <div class="product-name">{{ row.product_name }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="total_quantity" label="销量" width="100" align="center"/>
        </el-table>
      </div>

      <div class="card-item box-card">
        <div class="card-title">订单来源分析</div>
        <pieEcharts height="330px" :saleOrder="saleOrder"/>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Dashboard",
  inheritAttrs: false,
});
import {ref, onMounted} from "vue";
import dashboardAPI from "@/api/dashboard";
import PanelGroup from "./components/PanelGroup.vue"
import LineBarEcharts from "./components/LineBarEcharts.vue"
import pieEcharts from "./components/pieEcharts.vue"
import {useUserStore} from "@/store";

const userStore = useUserStore();
const totalInfo = ref({
  sale_amount: 0,
  sale_cnt: 0,
  sale_service_amount: 0,
  sale_service_ant: 0
})
const lineBarData = ref({
  xAxisData: [],
  sale_amount_list: [],
  sale_cnt_list: [],
  sale_service_amount_list: [],
  sale_service_cnt_list: []
});
const goodsSaleSort = ref([]);
const saleOrder = ref({
  customer_order_cnt: 0,
  merchant_order_cnt: 0
})

function getDashboardData() {

  dashboardAPI.getSupplierDashboard(1).then(data => {
    Object.assign(totalInfo.value, data);
  })

  dashboardAPI.getSupplierDashboard(2).then(data => {
    for (let i in data) {
      lineBarData.value.xAxisData.unshift(i);
      lineBarData.value.sale_amount_list.unshift(data[i].sale_amount);
      lineBarData.value.sale_cnt_list.unshift(data[i].sale_cnt);
      lineBarData.value.sale_service_amount_list.unshift(data[i].sale_service_amount);
      lineBarData.value.sale_service_cnt_list.unshift(data[i].sale_service_cnt);
    }
  })

  dashboardAPI.getSupplierDashboard(3).then((data: any) => {
    goodsSaleSort.value = data;
  })
  dashboardAPI.getSupplierDashboard(4).then((data: any) => {
    Object.assign(saleOrder.value, data);
  })
}

onMounted(() => {
  if (!userStore.isSupplier) {
    ElMessageBox.alert('您当前尚未认证供应商身份，快去认证吧~', '认证提示', {
      confirmButtonText: '去认证',
      callback: (action: Action) => {
        if (action == 'confirm') {
          router.push({name: "Profile"});
        }
      },
    })
  }else{
    getDashboardData();
  }
})

</script>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  padding: 20px;

  .box-card {
    padding: 10px;
    background-color: #ffffff;
    margin-bottom: 20px;

    .card-title {
      font-size: 16px;
      font-weight: bold;
      position: relative;
      padding-left: 10px;

      &::after {
        content: "";
        position: absolute;
        left: 0;
        top: 4px;
        height: 16px;
        width: 4px;
        background-color: rgba(84, 112, 222, 1);
      }
    }
  }

  .card-main {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .card-item {
      width: 49%;
      height: 400px;

      .sort-icon {
        width: auto;
        height: 25px;
      }

      .sort-num {
        font-size: 16px;
      }

      .product-info {
        display: flex;
        align-items: center;

        .product-pic {
          width: 40px;
          height: 40px;
          margin-right: 10px;
        }

        .product-name {
        }
      }
    }
  }
}
</style>

